<style lang="less"scoped="scoped">
	 
	img{
		width: 375px;
		height: 211px;
		
	}
	.detailList{
		padding: 10px 0;
		margin: 0 15px;
		font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
    	font-family: 'Microsoft YaHei', Tahoma, Helvetica, Arial, sans-serif;
		li{
			font-size: 12px;
			padding: 5px 0;
		}
		.introduction{
			font-size: 16px;
		}
	}
	
	.btn{
		width: 100%;
		text-align: center;
	}
	.tickets{
		    font-size: 14px;
		    min-width: 156px;
		    height: 36px;
		    line-height: 36px;
		    border: none;
		    background-color: #fe8233;
		    border-radius: 18px;
		    color: #fff;
		   	-webkit-transition: 0.5s ease;
			}
</style>




<template>
	<div id="film-detail">
		<img :src="obj.cover && obj.cover.origin"/>
		<ul class="detailList">
			<li class="introduction">影片简介</li>
			<li class="director">导&nbsp;&nbsp;&nbsp;&nbsp;演&nbsp;&nbsp;:&nbsp;&nbsp;{{obj.director}}</li>
			<li class="actors">主&nbsp;&nbsp;&nbsp;&nbsp;演&nbsp;&nbsp;:
				&nbsp;&nbsp;<span v-for = "item in obj.actors">{{item.name}} | </span>
			</li>
			<li class="language">地区语言&nbsp;&nbsp;:&nbsp;&nbsp;{{obj.nation}}({{obj.language}})</li>
			<li class="category">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型&nbsp;&nbsp;:&nbsp;&nbsp;{{obj.category}}</li>
			<li class="premiereAt">上映日期&nbsp;&nbsp;:&nbsp;&nbsp;{{releaseDate(obj.premiereAt)}}</li>
			<li class="synopsis">{{obj.synopsis}}</li>
		</ul>
		<div class="btn">
			<button class="tickets">立即购票</button>
		</div>
		
	</div>

</template>

<script>
	import { ajax } from '@/utils/index'
	export default{
		data() {
			return{
				obj: {}
			}
		},
		
		created(){

			this.getDetail();
			
		},
		
//		beforeRouteLeave(to,from,next){
//			title.innerText= '卖座电影';
//			next();
//		},
		
		components:{
			
		},
		
		
		methods: {
			
			getDetail(){
				
				let { id } = this.$route.query;
				let url = `/v4/api/film/${id}`;
				let data = { id };

				ajax(url,data,(res)=>{

					this.obj = res.film;
//					this.filmName();
					this.$store.commit('updateTitle',res.film.name);
				})
			},
			
			releaseDate(times){
				
				let time = new Date(times);
				
				let day = time.getDate();
				let month = time.getMonth() + 1;
				return `${month}月${day}日上映`;
			},
			
//			filmName(){
//				let title = document.getElementById('header').querySelector('.title');
//				title.innerText = this.obj.name;
//			}
			
		}	
	}
	
</script>

